<template>
  <div class="box">
    <header></header>
    <mian>
      <!-- 左盒子 -->
      <div class="box_left">
        <!-- 左上 -->
        <div class="box_left-top">
          <Title title="近三年来毕业人员去向"></Title>
          <QuxiangVue></QuxiangVue>
        </div>
        <!-- 左下 -->
        <div class="box_left-bottom">
          <Title title="毕业生工作状态"></Title>
          <ZhuangTaiVue></ZhuangTaiVue>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="box_center">
        <Map></Map>
        <ChenShiVue></ChenShiVue>
      </div>
      <!-- 右盒子 -->
      <div class="box_right">
        <!-- 右上 -->
        <div class="box_right-top">
          <div class="TitleHeader"><div class="Title">毕业生流向城市</div></div>
          <LiuXiangVue></LiuXiangVue>
        </div>
        <div class="box_right-bottom">
          <!-- 右下 -->
          <div class="TitleHeader">
            <div class="Title">毕业生薪资分布</div>
            <XinZiVue></XinZiVue>
          </div>
        </div>
      </div>
      <!-- 底部tab切换 -->
      <div class="box_bottom">
        <NavtabVue></NavtabVue>
      </div>
    </mian>
  </div>
</template>
<script setup lang="ts">
import Title from "../../components/Title.vue";
import NavtabVue from "../../components/Navtab.vue";
import QuxiangVue from "../../components/Quxiang.vue";
import ChenShiVue from "../../components/ChenShi.vue";
import LiuXiangVue from "../../components/LiuXiang.vue";
import XinZiVue from "../../components/XinZi.vue";
import ZhuangTaiVue from "../../components/ZhuangTai.vue";
import Map from "../../components/Map.vue";
</script>

<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: url("../../imgs/pageBg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 0;
  left: 0;
}

.box_left {
  width: 30%;
  height: 100%;
  background: url("../../imgs/left.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;

  .box_left-top {
    margin: 80px 50px;
    height: 45vh;
  }

  .box_left-bottom {
    margin: 60px 50px;
    height: 30vh;
  }
}

.box_center {
  width: 37%;
  height: 70%;
  background: url("../../imgs/center.png");
  background-size: 100% 100%;
  position: absolute;
  top: 15%;
  left: 31%;
}

.box_right {
  width: 30%;
  height: 100%;
  background: url("../../imgs/right.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  right: 0;

  .box_right-top {
    width: 85%;
    margin: 10%;
    height: 40vh;
    .TitleHeader {
      width: 90%;
      height: 40px;
      background-size: 100% 100%;
      margin-top: 100px;
      line-height: 40px;
      background: url("../../imgs/zuoTitle.png") no-repeat;
      transform: rotateY(180deg);
    }
    .Title {
      color: #fff;
      transform: rotateY(180deg);
      padding: 0px 100px;
    }
  }

  .box_right-bottom {
    margin: 60px 50px;
    height: 40vh;
    .TitleHeader {
      width: 90%;
      height: 40px;
      background-size: 100% 100%;
      margin-top: 3%;
      line-height: 40px;
      background: url("../../imgs/zuoTitle.png") no-repeat;
      transform: rotateY(180deg);
    }
    .Title {
      color: #fff;
      transform: rotateY(180deg);
      padding: 0px 100px;
    }
  }
}

.box_bottom {
  width: 70%;
  height: 127px;
  position: absolute;
  bottom: 0;
  margin: 0 15%;
  color: #fff;
}
header {
  width: 100vw;
  height: 95px;
  background: url("../../imgs/top.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
}
</style>
